<!--
 * @Description: 人员统计卡片组件 - 专注于核心指标展示
 -->
 <template>
  <div class="personnel-stats-cards">
    <!-- 统计卡片区域 -->
    <div class="stats-cards-container">
      <el-row :gutter="24">
        <!-- 总人数卡片 -->
        <el-col :xs="24" :sm="8" :md="8" :lg="8">
          <div class="enhanced-stats-card total-card" @click="handleCardClick('total')">
            <div class="card-header">
              <div class="stats-icon-wrapper">
                <div class="icon-bg total-bg">
                  <el-icon class="stats-icon" size="48">
                    <User />
                  </el-icon>
                </div>
              </div>
              <div class="card-badge">在职</div>
            </div>
            
            <div class="stats-content">
              <div class="stats-value total-value">{{ totalCount }}</div>
              <div class="stats-label">总人数</div>
              <div class="stats-subtitle">当前在职人员总数</div>
            </div>
            
            <div class="card-footer">
              <div class="trend-indicator">
                <el-icon><TrendCharts /></el-icon>
                <span>实时统计</span>
              </div>
            </div>
          </div>
        </el-col>
        
        <!-- 增加人数卡片 -->
        <el-col :xs="24" :sm="8" :md="8" :lg="8">
          <div class="enhanced-stats-card increase-card" @click="handleCardClick('increase')">
            <div class="card-header">
              <div class="stats-icon-wrapper">
                <div class="icon-bg increase-bg">
                  <el-icon class="stats-icon" size="48">
                    <Top />
                  </el-icon>
                </div>
              </div>
              <div class="time-selector">
                <el-select 
                  v-model="increaseTimeRange" 
                  size="small" 
                  @change="handleTimeRangeChange('increase')"
                >
                  <el-option label="周" value="week" />
                  <el-option label="月" value="month" />
                  <el-option label="年" value="year" />
                </el-select>
              </div>
            </div>
            
            <div class="stats-content">
              <div class="stats-value increase-value">{{ increaseCount }}</div>
              <div class="stats-label">{{ increaseTimeRange === 'week' ? '周度' : increaseTimeRange === 'month' ? '月度' : '年度' }}新增</div>
              <div class="stats-subtitle">{{ getIncreaseSubtitle() }}</div>
            </div>
            
            <div class="card-footer">
              <div class="trend-indicator positive">
                <el-icon><CaretTop /></el-icon>
                <span>{{ increasePercentage }}% 增长率</span>
              </div>
            </div>
          </div>
        </el-col>
        
        <!-- 减少人数卡片 -->
        <el-col :xs="24" :sm="8" :md="8" :lg="8">
          <div class="enhanced-stats-card decrease-card" @click="handleCardClick('decrease')">
            <div class="card-header">
              <div class="stats-icon-wrapper">
                <div class="icon-bg decrease-bg">
                  <el-icon class="stats-icon" size="48">
                    <Bottom />
                  </el-icon>
                </div>
              </div>
              <div class="time-selector">
                <el-select 
                  v-model="decreaseTimeRange" 
                  size="small"
                  @change="handleTimeRangeChange('decrease')"
                >
                  <el-option label="周" value="week" />
                  <el-option label="月" value="month" />
                  <el-option label="年" value="year" />
                </el-select>
              </div>
            </div>
            
            <div class="stats-content">
              <div class="stats-value decrease-value">{{ decreaseCount }}</div>
              <div class="stats-label">{{ decreaseTimeRange === 'week' ? '周度' : decreaseTimeRange === 'month' ? '月度' : '年度' }}减少</div>
              <div class="stats-subtitle">{{ getDecreaseSubtitle() }}</div>
            </div>
            
            <div class="card-footer">
              <div class="trend-indicator negative">
                <el-icon><CaretBottom /></el-icon>
                <span>{{ decreasePercentage }}% 减少率</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <!-- 净变动汇总条 -->
    <div class="net-change-summary" :class="netChangeClass">
      <div class="summary-content">
        <div class="summary-icon">
          <el-icon v-if="netChange > 0" size="24"><TrendCharts /></el-icon>
          <el-icon v-else-if="netChange < 0" size="24"><Bottom /></el-icon>
          <el-icon v-else size="24"><Minus /></el-icon>
        </div>
        <div class="summary-text">
          <span class="summary-label">净变动：</span>
          <span class="summary-value">{{ netChangeText }}</span>
          <span class="summary-desc">（基于当前时间周期统计）</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineEmits, defineProps, watch } from 'vue';
import {
  User,
  Top,
  Bottom,
  TrendCharts,
  CaretTop,
  CaretBottom,
  Minus
} from '@element-plus/icons-vue';

// Props
interface Props {
  totalCount: number;
  personnelData: any[];
  loading?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
});

// Emits
const emit = defineEmits<{
  cardClick: [type: string];
  timeRangeChange: [type: string, range: string];
}>();

// 响应式数据
const increaseTimeRange = ref<string>('month');
const decreaseTimeRange = ref<string>('month');

// 计算属性
const increaseCount = computed(() => {
  return calculatePersonnelChange('increase', increaseTimeRange.value);
});

const decreaseCount = computed(() => {
  return calculatePersonnelChange('decrease', decreaseTimeRange.value);
});

const netChange = computed(() => {
  return increaseCount.value - decreaseCount.value;
});

const netChangeClass = computed(() => {
  if (netChange.value > 0) return 'positive';
  if (netChange.value < 0) return 'negative';
  return 'neutral';
});

const netChangeText = computed(() => {
  const absChange = Math.abs(netChange.value);
  if (netChange.value > 0) {
    return `+${absChange} 人`;
  } else if (netChange.value < 0) {
    return `-${absChange} 人`;
  }
  return '持平';
});

const increasePercentage = computed(() => {
  if (props.totalCount === 0) return 0;
  return ((increaseCount.value / props.totalCount) * 100).toFixed(1);
});

const decreasePercentage = computed(() => {
  if (props.totalCount === 0) return 0;
  return ((decreaseCount.value / props.totalCount) * 100).toFixed(1);
});

// 方法
const calculatePersonnelChange = (type: 'increase' | 'decrease', timeRange: string): number => {
  if (!props.personnelData || props.personnelData.length === 0) return 0;
  
  const now = new Date();
  let startDate: Date;
  
  // 根据时间范围确定开始日期
  switch (timeRange) {
    case 'week':
      startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
      break;
    case 'month':
      startDate = new Date(now.getFullYear(), now.getMonth(), 1);
      break;
    case 'year':
      startDate = new Date(now.getFullYear(), 0, 1);
      break;
    default:
      startDate = new Date(now.getFullYear(), now.getMonth(), 1);
  }
  
  if (type === 'increase') {
    // 计算入职人数
    return props.personnelData.filter(person => {
      const entryDate = new Date(person.entryDate);
      return entryDate >= startDate && entryDate <= now;
    }).length;
  } else {
    // 计算离职人数（这里用模拟数据，实际项目中应该有离职数据）
    // 可以根据合同结束时间或者实际离职记录来计算
    if (timeRange === 'week') return Math.floor(Math.random() * 2);
    if (timeRange === 'month') return Math.floor(Math.random() * 3) + 1;
    if (timeRange === 'year') return Math.floor(Math.random() * 5) + 2;
    return 1;
  }
};

const getIncreaseSubtitle = (): string => {
  const timeRangeMap = {
    week: '本周新入职',
    month: '本月新入职', 
    year: '本年新入职'
  };
  return timeRangeMap[increaseTimeRange.value] || '新入职人员';
};

const getDecreaseSubtitle = (): string => {
  const timeRangeMap = {
    week: '本周离职',
    month: '本月离职',
    year: '本年离职'
  };
  return timeRangeMap[decreaseTimeRange.value] || '离职人员';
};

const handleCardClick = (type: string) => {
  emit('cardClick', type);
};

const handleTimeRangeChange = (type: string, range: string) => {
  emit('timeRangeChange', type, range);
};

// 监听时间范围变化
watch([increaseTimeRange, decreaseTimeRange], () => {
  // 可以在这里触发数据重新计算或其他副作用
});
</script>

<style lang="scss" scoped>
.personnel-stats-cards {
  margin-bottom: 24px;
}

.stats-cards-container {
  margin-bottom: 16px;
}

.enhanced-stats-card {
  background: white;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 2px solid transparent;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  min-height: 200px;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 20px 20px 0 0;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
  }
  
  &:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    
    .stats-icon-wrapper {
      .icon-bg {
        width: 90px;
        height: 90px;
        border-radius: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        
        .stats-icon {
          color: white;
          filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
        }
      }
    }
    
    .card-badge {
      background: rgba(64, 158, 255, 0.1);
      color: #409eff;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid rgba(64, 158, 255, 0.2);
    }
    
    .time-selector {
      :deep(.el-select) {
        width: 80px;
        
        .el-input__wrapper {
          border-radius: 16px;
          background: rgba(255, 255, 255, 0.8);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
      }
    }
  }
  
  .stats-content {
    text-align: left;
    margin-bottom: 20px;
    
    .stats-value {
      font-size: 48px;
      font-weight: 900;
      line-height: 1;
      margin-bottom: 8px;
      background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .stats-label {
      font-size: 18px;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 6px;
    }
    
    .stats-subtitle {
      font-size: 13px;
      color: #909399;
      font-weight: 500;
    }
  }
  
  .card-footer {
    .trend-indicator {
      display: flex;
      align-items: center;
      font-size: 13px;
      font-weight: 600;
      padding: 8px 12px;
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.02);
      
      .el-icon {
        margin-right: 6px;
      }
      
      &.positive {
        color: #67c23a;
        background: rgba(103, 194, 58, 0.1);
      }
      
      &.negative {
        color: #f56c6c;
        background: rgba(245, 108, 108, 0.1);
      }
    }
  }
}

// 卡片特定样式
.total-card {
  &::before {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  }
  
  .total-bg {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }
  
  .total-value {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  &:hover {
    border-color: rgba(79, 172, 254, 0.3);
  }
}

.increase-card {
  &::before {
    background: linear-gradient(90deg, #4ecdc4 0%, #44a08d 100%);
  }
  
  .increase-bg {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
  }
  
  .increase-value {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  &:hover {
    border-color: rgba(78, 205, 196, 0.3);
  }
}

.decrease-card {
  &::before {
    background: linear-gradient(90deg, #ff9a9e 0%, #fecfef 100%);
  }
  
  .decrease-bg {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  }
  
  .decrease-value {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  &:hover {
    border-color: rgba(255, 154, 158, 0.3);
  }
}

// 净变动汇总条
.net-change-summary {
  background: white;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-left: 6px solid;
  transition: all 0.3s ease;
  
  &.positive {
    border-left-color: #67c23a;
    background: linear-gradient(135deg, rgba(103, 194, 58, 0.05) 0%, rgba(103, 194, 58, 0.02) 100%);
  }
  
  &.negative {
    border-left-color: #f56c6c;
    background: linear-gradient(135deg, rgba(245, 108, 108, 0.05) 0%, rgba(245, 108, 108, 0.02) 100%);
  }
  
  &.neutral {
    border-left-color: #909399;
    background: linear-gradient(135deg, rgba(144, 147, 153, 0.05) 0%, rgba(144, 147, 153, 0.02) 100%);
  }
  
  .summary-content {
    display: flex;
    align-items: center;
    
    .summary-icon {
      margin-right: 16px;
      padding: 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.8);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      
      .el-icon {
        color: inherit;
      }
    }
    
    .summary-text {
      flex: 1;
      
      .summary-label {
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
        margin-right: 8px;
      }
      
      .summary-value {
        font-size: 20px;
        font-weight: 800;
        color: inherit;
        margin-right: 12px;
      }
      
      .summary-desc {
        font-size: 13px;
        color: #909399;
        font-weight: 500;
      }
    }
  }
  
  &.positive {
    color: #67c23a;
  }
  
  &.negative {
    color: #f56c6c;
  }
  
  &.neutral {
    color: #909399;
  }
}

// 响应式样式
@media (max-width: 768px) {
  .enhanced-stats-card {
    min-height: 160px;
    padding: 20px 16px;
    
    .card-header {
      .stats-icon-wrapper .icon-bg {
        width: 70px;
        height: 70px;
        border-radius: 18px;
        
        .stats-icon {
          font-size: 36px !important;
        }
      }
      
      .time-selector {
        :deep(.el-select) {
          width: 70px;
        }
      }
    }
    
    .stats-content {
      .stats-value {
        font-size: 36px;
      }
      
      .stats-label {
        font-size: 16px;
      }
    }
  }
  
  .net-change-summary {
    padding: 16px 20px;
    
    .summary-content {
      .summary-icon {
        padding: 8px;
        margin-right: 12px;
        
        .el-icon {
          font-size: 18px !important;
        }
      }
      
      .summary-text {
        .summary-value {
          font-size: 18px;
        }
      }
    }
  }
}
</style>